<template>
	<div class="navmenu">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
		  <el-menu-item index="1">处理中心</el-menu-item>
		  <el-submenu index="2">
			<template slot="title">我的工作台</template>
			<el-menu-item index="2-1">选项1</el-menu-item>
			<el-menu-item index="2-2">选项2</el-menu-item>
			<el-menu-item index="2-3">选项3</el-menu-item>
			<el-submenu index="2-4">
			  <template slot="title">选项4</template>
			  <el-menu-item index="2-4-1">选项1</el-menu-item>
			  <el-menu-item index="2-4-2">选项2</el-menu-item>
			  <el-menu-item index="2-4-3">选项3</el-menu-item>
			</el-submenu>
		  </el-submenu>
		  <el-menu-item index="3" disabled>消息中心</el-menu-item>
		  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
		</el-menu>
		<div class="line"></div>
			<el-menu
			  :default-active="activeIndex2"
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  background-color="#545c64"
			  text-color="#fff"
			  active-text-color="#ffd04b">
			  <el-menu-item index="1"><router-link exact to="/buttons">按钮展示</router-link></el-menu-item>
			  <el-menu-item index="1"><router-link exact to="/score">评分</router-link></el-menu-item>
			  <el-menu-item index="1"><router-link exact to="/trees">树结构</router-link></el-menu-item>
			  <el-menu-item index="1"><router-link exact to="/shuttleBox">穿梭框</router-link></el-menu-item>
			  <el-submenu index="2">
				<template slot="title">表格展示</template>
				<el-menu-item index="2-1"><router-link exact to="/tables/table1">表格一</router-link></el-menu-item>
				<el-menu-item index="2-2"><router-link exact to="/tables/table2">表格二</router-link></el-menu-item>
				<el-menu-item index="2-3"><router-link exact to="/tables/table3">表格三</router-link></el-menu-item>
				<el-menu-item index="2-3"><router-link exact to="/tables/table4">表格四</router-link></el-menu-item>
				<!-- <el-submenu index="2-4">
				  <template slot="title">选项4</template>
				  <el-menu-item index="2-4-1">选项1</el-menu-item>
				  <el-menu-item index="2-4-2">选项2</el-menu-item>
				  <el-menu-item index="2-4-3">选项3</el-menu-item>
				</el-submenu> -->
			  </el-submenu>
			  <el-menu-item index="3" disabled>消息中心</el-menu-item>
			  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
			</el-menu>
	</div>
</template>

<script>
	export default {
		data() {
		  return {
			activeIndex: '1',
			activeIndex2: '1'
		  };
		},
		methods: {
		  handleSelect(key, keyPath) {
			console.log(key, keyPath);
		  }
		}
	}
</script>

<style>

</style>
